<template>
    <fieldset>
        <legend>子组件</legend>
        <h1>子组件</h1>
        <h1>{{ gift }}</h1>
        <h1>余额:{{ balance }}</h1>
        <button @click="bet">点击下注</button>
    </fieldset>
</template>
<script setup>
//使用defineProps来声明props属性
import { defineProps, toRefs, ref, defineEmits, defineExpose } from "vue"

let props = defineProps({
    gift: {
        type: String
    }
})

//解构props中的属性,会消除他的响应性
//使用toRefs让属性重新获得响应性
let { gift } = toRefs(props)

// console.log(props)

//子传父的过程

let balance = ref(1000252)

//使用defineEmits来声明自定义事件
let emit = defineEmits(['betMoney'])
console.log(emit)
let bet = function () {
    balance.value = balance.value - 10000
    emit('betMoney', 10000)
}

//defineExpose 把子组件的方法和属性暴露给父组件
//defineExpose 一般暴露方法给父组件,一些静态属性父组件
defineExpose({
    balance,
    bet
})

throw new Error('您的余额不足,请充值')

</script>